<template>
  <div v-if="comment">
    <el-row type="flex">
      <el-col
        ><router-link tag="a" :to="{name:'User', params:{id:comment.author_detail.id}}"><el-avatar :src="comment.author_detail.avatar"></el-avatar>
        {{ comment.author_detail.nickname|nicknameEllipsis }}</router-link><span v-if="comment.parent"> 
          回复
           <router-link :to="{name:'User', params:{id:comment.parent_author_detail.id}}">{{comment.parent_author_detail.nickname|nicknameEllipsis}}</router-link></span></el-col
      >
      <el-col class="datetime">{{
        comment.created_at | datetimeFormatter
      }}</el-col>
    </el-row>
    <div class="text-block multi-line" :style="+comment.is_deleted?'color:grey;font-size:.8em;':''"  >{{ comment.content }}</div>
    <el-row style="margin-left: 2em">
      <el-col :span="1">
        <div><i :class="thumbUped^toggleThumbUp?'fa fa-thumbs-up pointer':'fa fa-thumbs-o-up pointer' " style="color:orange" @click="thumbUp"></i> {{newThumbUpAmt||thumbUpAmt}}</div>
      </el-col>
      <el-col :span="6" :offset="3"
        ><el-link :underline="false" @click="toggleCommentForm"
          ><i class="fa fa-reply" v-if="!showCommentForm"></i>
          {{ showCommentForm ? "取消回复" : "回复" }}</el-link
        ></el-col
      >
      <el-col v-if="info==comment.author" :span="4" :offset="10">
        <el-link @click="delComment" :underline="false"><span class="mini-text" style="color:grey;" >删除</span></el-link>
        </el-col>
    </el-row>
    <ReplyList :articleId="comment.article" :rootId="comment.id" style="padding-left:2.2em;" v-if="!comment.parent&&comment.have_descendants"></ReplyList>
    <CommentForm
      :articleId="comment.article"
      :parentId="comment.id"
      v-if="showCommentForm"
    ></CommentForm>
    <el-divider v-if="!comment.parent"></el-divider>
  </div>
</template>

<script>
import ReplyList from "@/components/CommentList.vue";
import CommentForm from "@/components/CommentForm.vue";
export default {
  props: {
    comment: { type: Object },
  },
  data() {
    return {
      showCommentForm: false,
      newThumbUpAmt:0,
      toggleThumbUp:false,
      info: null,
    };
  },
  mounted(){
    this.info = parseInt(localStorage.info)
  },
  components: {
    CommentForm,
    ReplyList,
  },
  methods: {
    toggleCommentForm() {
      this.showCommentForm = !this.showCommentForm;
    },
    thumbUp(){
      this.$http.post("comments/"+this.comment.id+"/thumbup/").then(res=>{
        if(this.thumbUped){
          this.$message({message:"取消点赞", type: 'success', duration: 1000})
        }else{
          this.$message({message:"点赞成功", type: 'success', duration: 1000})
        }
        let newThumbUpAmt = 0
        if(res.data.thumbuped_by){
          newThumbUpAmt = res.data.thumbuped_by.split(';').length
        }
        this.newThumbUpAmt = newThumbUpAmt
        this.toggleThumbUp = !this.toggleThumbUp
      })
    },
    delComment(){
      let id = this.comment.id
      this.$http.delete("comments/"+id+"/").then(()=>{
        this.comment.content = '已删除'
        this.comment.is_delete = true
      })
    }
  },
  computed:{
    thumbUpAmt: {
      get(){
      if (this.comment.thumbuped_by!=null) {
        return this.comment.thumbuped_by.split(";").length;
      } else {
        return 0;
      }
      }
    },
    thumbUped(){
      if (this.comment.thumbuped_by!=null) {
        let userId = localStorage.getItem("id")
        return this.comment.thumbuped_by.split(";").indexOf(userId)!=-1;
      } else {
        return false;
      }
    }
  }
};
</script>

<style>
a {
  text-decoration: none;
}
.text-block {
  margin: 1em;
}
.multi-line{
  white-space: pre-wrap;
}
</style>